<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#box{
				width:500px;
				height:500px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload = function(){
				var cavBox = document.getElementById("cav");
				var ocav = cavBox.getContext('2d');
//				     圆心 x   y  r   开始弧度  结束弧度        true 逆时针 false顺时针
				ocav.beginPath();
				ocav.arc(250,250,200,0,       360*Math.PI/180,true);
				ocav.stroke();
				
				ocav.beginPath();
				ocav.arc(175,250,100,310*Math.PI/180,210*Math.PI/180,true);
				ocav.stroke();
				
				ocav.beginPath();
				ocav.arc(325,250,100,330*Math.PI/180,230*Math.PI/180,true);
				ocav.stroke();
				
				ocav.beginPath();
				ocav.arc(250,270,10,0*Math.PI/180,360*Math.PI/180,true);
				ocav.stroke();
				
				ocav.beginPath();
				ocav.arc(250,320,50,30*Math.PI/180,150*Math.PI/180,false);
				ocav.stroke();
			}
		</script>
	</head>
	<body>
		<div id="box">
			<canvas id="cav" width="500" height="500"></canvas>
			
		</div>

	</body>
</html>
